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Ever since the introduction of Bitcoin in 2009, Blockchain has always been in highlights 
and has attracted everyone worldwide. Today, Bitcoin is valued at over $31,000. Apart 
from bitcoin, various other cryptocurrencies have been developed that have also gained 
huge profits. Released in 2014, Stellar is a decentralized payment network that gained 
popularity due to its unique approach and appeals to cross border payments. It is a 
blockchain-based open-source database dedicated to making transactions faster, safer 
and easier. It takes international payments to a whole new level by providing secure, real- 
time and low-cost transfers. 


The cryptocurrency issued by Stellar is known as Stellar Lumen or XLM. 


Stellar’s Coinmarketcap rank is #11 with a market cap of around $6 billion. The Stellar 
coin is presently valued at $0.278 with a 24-hour trading volume of $877.01 million. 
Founder of Stellar, Jed McCaleb, developed Stellar to provide people a way to move their 
fiat currency into crypto and remove the friction involved in transferring money 
worldwide. The not-for-profit organization, Stellar Development Foundation, aims to 
“unlock the world’s economic potential by making money more fluid, markets more open 
and people more empowered.” 


Stellar is unique since the fee for every transaction is just 0.00001 XLM. Such minimal 
transaction cost attracts more users and ensures that users keep most of their money. 


This article aims to deliver a clear explanation of Stellar wallets, discuss the detailed steps 
to create a basic wallet and integrate Stellar wallets into an existing application. 
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What’s a Stellar wallet and what does it hold? 


A stellar wallet is an application component built to handle basic functionalities like 
account creation, key storage, queries and transaction signing to the Stellar database. 


Unlike real-world wallets, Stellar wallets do not hold digital cash, at least not directly. 
Stellar wallets are used to sign and submit the transactions and view the Stellar ledger’s 
past and current state. The ledger stores data, including offers to buy and sell, accounts 
and balances shared by all nodes that make up a network. Wallet stores caches or 
references to the Stellar database, but the actual data is stored on the blockchain. 


The key takeaway here is that the Stellar wallet, rather than holding or storing something, 
is an interface or interactive layer on top of Stellar. Therefore, Stellar wallet’s discussion 
revolves around accessing and surfacing data in the network rather than storing 
something on our end. 


Wallets operate on the client-side deal with user’s secret keys, giving direct access to the 
user’s accounts. Therefore, for the wallet’s security, it is necessary to flow all the web 
traffic over strong TLS methods. Moreover, key management is an inevitable part of 
security. Before moving on to the creation of wallets, first, we discuss some basics of key 
management in a Stellar wallet. 


How to manage keys? 


The first step for any app is to sort out user onboarding. Since secret keys control the 
access of the user’s account, deciding how to handle keys and how to append the Stellar 
account to a user object becomes the priority. 


An important question might occur to your mind here: who will “own” the account? The 
answer involves three possibilities: 


e The service provider is the owner, stores the secret keys and represents the usage 
rights to the user. It is a custodial service. 

e The user is the owner, will have self-custody of their account credentials and 
delegate transaction signing. It is a non-custodial service. 

e A blend of both via multi-sig. This method helps maintain non-custodial status 
while still allowing for account recovery. 


While going with the first or third approach, excessive carefulness is required to store and 
take control of the user’s secret keys. It is easy to get wrong and reach a devastating 
situation. Although, developers can choose any of the options depending on their 
requirements. Here, our focus is to present to you how to build a non-custodial service. 
Our goal is to take you to a place where user can create, store and access Stellar account 
using intuitive encryption method. 


We'll use a toolchain called StencilJS. It provides the best of modern frontend frameworks 
and pares everything back to small, fast and completely standard-based web components 
that work on every browser. It provides an easy way to create web applications and allows 
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you to see all the ins and outs of creating a Stellar wallet from start to end. 


Project Setup 


To set up the project, open the terminal and initialize a new project. 


1 npm init stencil 


A prompt vill appear to choose the type of project. Choose components as we are dealing 
with modular components, not the entire application. Now run: 


1 $ npm run generate 


This step will initialize a component generation script. Enter stellar-wallet. 


% nom run aenerate 

&at: stellar-wallet aenerate 

&at: stencil aenerate 

$ stencil generate stellar-wallet 
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The following files have been generated 


1 - src/components/wallet/wallet.tsx 
2  - src/components/wallet/wallet.css 


Now, for styling, we’re using SCSS rather than CSS 


1 nom i -D @stencil/postcss @stencil/sass autoprefixer 
@types/autoprefixer rollup-plugin-node-polyfills 


After the style packages have installed, go to stencil.config.ts and modify it to this: 
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01 import { Confia } from "@stencil/core"; 

02 (import { sass } from "@stencil/sass"; 

03 import { postcss } from "@stencil/postcss"; 

0 import autoprefixer from "autoprefixer": 

import nodePolvfills from "rollup-plugin-node-polyfills"; 


05 export const confia: Confia = { 
0 namespace: "stellar-wallet", 
07 outputTargets: [ 
08 fí 
09 tvpe: "dist", 
10  esmboaderPath: ~--/lodader™, 
11 - 
12 . " " 
tvoe: "docs-readme", 
3 
14 f 


15 tvpe: "ww". 
16 serviceWorker: null, // disable service workers 
17 £e 
18 «I. 
49 alobalStvle: "src/global/style.scss", 
20 commonis: { 
namedExpnorts: £ 
21 "stellar-sdk": [ 
22 UStGKeVes 


23 pd 

24 "Transaction", 

25 "Kevoair", 

26 "Networks", 

2 "Account", "TransactionBuilder", 


"BASE FEE", 
28 "Operation", 


29 WAssete, 

3 "Memo", 

31 "MemoHash", 
32 1 


33 "@stellar/wallet-sdk": ["KeyManager", "KeyManagerPlugins", 
34 K ii ; 


te 
36 plugins: T 
37 nodePolvfills(), 
3 sass(), 
39 postcss({ 
40 plugins: [autoprefixer()], 
41 ME 
42 |. 
43 nodeResolve: { 
44 browser: true, 
preferBuiltins: true, 


Save all the style files and update wallet.tsx. 
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Non-custodial wallets do not need to communicate with servers or databases, and every 


action is performed locally on the user’s device. The basic user flow is expected to work as: 


“Create account UI modal popup asking for pincode enter pincode app encrypts a new 
secret Stellar keypair with pincode save encrypted key to local storage. For every page 
reload, ‘public key’ is fetched to allow the user to login into the account. For any protected 
action like “CopySecret,” the modal will popup again and ask for the original pincode. 


Create Popup Modal 


For the popup modal, the browser’s prompt functionality will be implemented with our 
new component. First, generate a new component: 


1 npm run generate 


Name it as stellar-prompt. Open src/components/prompt/ and change the .css file to 
.scss. In that style file write this: 


01 @import "../../global/style.scss"; 

o2 :host { 

03 displav: block: 

04 font-familv: $font-family; 
font-size: 15px: 


05 .brompt-wrapper { 
06 position: absolute; 
O7 ton: 0: 

08 left: O: 


09 bottom: 0; 
10 Mront To; 
11 display: 
12 flex: 
alian-items: center: 
iustifv-content: center; 
14 alian-content: center; 
15 min-heiaht: 100vh; 
16 min-width: 100ww: 
17  backaround-color: rgba(black, 0.2); 
18 Emde: 1; 
1 
be .brompt { 
backaround-color: white; 
paddina: 20px: 
22 max-width: 350pX; 
23 width: 100%: 
24 position: relative; 


25 of 

26 margin-bottom: 10px; 
27 E 

28 input { 


width: 100%; 

marain: 0: 

30 bþbaddina: 5px: 

31 outline: none: 

32 border: 1px solid black: 
33 text-transform: uppercase; 


34 focus 
35 border-color: blue; 
} 
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1 
} 

.select-wrapper { 
position: relative 
display: inline-flex; 
select { 
border-color: blue; 
padding: © 10px; 
min-width: 100px; 

1 

after, 

before { 

font-size: 12px; 
position: absolute; 


right: 10px; 
color: blue; 
1 

after { 


content: top: calc(50% - 5px); transform: translate(0, 
rotate(90deq); } before { content: 

top: calce(50% + 5px); 

transform: translate(0, -50%) rotate(90deg); 
1 

1 

-actions 4 

display: flex; 

justify-content: flex-end; 

margin-top: 10px; 

button { 

margin: 0; 

min-width: 50px; 

1 

.cancel { 

background: none; 

border: 1px solid blue; 

color: blue; 


1 
.submit { 
margin-left: 10px; 
1 

1 

} 


Now replace the content of prompt.tsx with this: 


001 
002 
003 
004 
005 
006 


-50%) 


import { Component, Prop, Element, Watch, h, State } from 


"@stencil/core": 

imoort { defer as loDefer } from lodash-es"; 
export interface Prompter { 

show: boolean: 

message?: strina: 

placeholder?: string; 
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options?: Array 
resolve?: Function; 
reject?: Function; 

1 

@Component( £ 

taq: "stellar-prompt", 
stvleUrl: "prompt.scss", 
shadow: true, 

Y) 

export class Prompt { 
@Element() private element: HTMLElement; 


@Prop({ mutable: true }) prompter: Prompter; 


@State() private input: string; 
@watch("prompter" ) 


watchHandler(newValue: Prompter, oldValue: Prompter) { 
if (newValue.show === oldValue.show) return; 


if (newValue.show) { 
this.input = null; 

if (newValue.options) 
this.input = 
this.input |l 


`${newValue.options[0].code}:${newValue.options[0].issuer} `; 


else 
lioDefer(() = 


this.element.shadowRoot.querySelector("input").focus()); 


} else { 

this.prompter.message = null; 
this.prompter.placeholder = null; 
this.prompter.options = null; 


1 
componentDidLoad() { 


addEventListener("keyup", (e: KeyboardEvent) = { 


if (this.prompter.show) 


e.keyCode === 13 

? this.submit(e) 

: e.keyCode === 27 
? this.cancel(e) 
mull 

ty 

1 


cancel(e: Event) { 
e.preventDefault(); 
this.prompter = { 

+: this.prompter, 

show: false, 

io 
this.prompter.reject(null); 


submit(e: Event) { 
e.preventDefault(); 

this.prompter = { 

.. .this.prompter, 

show: false, 

W? 
this.prompter.resolve(this.input); 


update(e) { 

this.input = e.target.value.toUpperCase(); 
1 

render() { 

return this.prompter.show ? ( 

div class="prompt-wrapper"; 
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063 
064 
065 
066 
067 
068 
069 
070 
071 
072 
073 
074 
075 
076 
077 
078 
079 
080 
081 
082 
083 
084 
085 
086 
087 
088 
089 
090 
091 
092 
093 
094 
095 
096 
097 
098 
099 
100 
101 
102 
103 
104 
105 
106 
107 
108 
109 
110 


div class="prompt" 

{this.prompter.messaqe ? ;p;gt;{this.prompter.message} : null} 
{this.prompter.options ? ( 

div class="select-wrapper" 

select onInput={(e) =&amp;gt; this.update(e)} 

u Lat 

f{this.prompter.options.map((option) =( 

option 

value={ $foption.code}:$foption. issuer} } 
selected={this.input === ~$f{option.code}:${option.issuer} } 
foption.code} 

/option 

D 

/select 

/div 
Wg 

lt;input 

type="text" 
placeholder={this.prompter .placeholder} 
value={this.input} 

onInput={(e) =&amp;gt; this.update(e)} 
/input 

)} 

div class="actions" 

button 

class="cancel" 

type="button" 

onClick={(e) =this.cancel(e)} 

Cancel 

/button 

button 

class="submit" 

type="button" 

onClick={(e) = this.submit(e)} 

OK 

/button 

/div; 

/div 

/div 

Joa DUHUL 

1 

} 


Make sure to import lodash-es before moving ahead: 


1 


npm i -D lodash-es 


Create Stellar Account Class 
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AUN- 


interface StellarAccount { 
publicKey: strinq; 
keystore: string; 


J 


StellarAccount is a class that includes the public key. Set up account state with 
StellarAccount class and prompter state with Prompter class. 


@QComponent({ 

taq: 'stellar-wallet', 

styleUrl: 'wallet.scss', 

shadow: true 

1) 

export class Wallet { 

@State() account: StellarAccount 

@State() prompter: Prompter = {show: false} 
@State() error: any = null 


After this step, the assignment of imported events and methods needs to be done. 


import { handleError } from "@services/error"; 
import { get } from "@services/storaqe"; 
export default async function componentWillLoad() { 
enyi 

let keystore = await get("keyStore"); 

this error = null; 

if (keystore) { 

keystore = atob(kevstore); 

const { publicKey } = 

JSON.parse(atob( JSON.parse(keystore).adata) ); 
this; account = { 

publicKey, 

keystore, 

iy 

1 

} catch (err) { 

this.error = handleError(err); 

1 

k 


componentWillLoad prefills the state and props values before actually rendering the 
component. Now, create the following two files and add them to the src/services 
directory. 


1 
2 


mkdir -p src/services 
touch src/services/{error,storage}.ts 


error.ts will hold the following: 
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AUN- 


import { qet as loGet } from "lodash-es"; 
export function handleError(err: any) { 
return loGet(err, "response.data", loGet(err, "message", err)); 


J 


It is a simple error handler used while processing API requests. 


Set up key storage 


Modify storage.ts as: 
01 import { Plugins } from "@capacitor/core"; 
02 const { Storage } = Pludins: 
03 exbort asvnc function set(key: string, value: any): Promise { 
04 await Storage.set({ 
kev. 
05 value, 
06 4); 
07 3 
08 export asvne function aet(kev: strina): Promise { 
09 const item = await Storage.get({ key }); 
10 (return item value; 
1 E , 
12 export asvnc function remove(key: string): Promise { 
13 await Storage.remove({ key }); 
14 } 
15 


Install and set up a new package @capacitor/core. 


1 
2 
3 
4 
5 
6 
7 


# Install dependencies 

nom i -D @capacitor/core @capacitor/cli 

# Initialize Capacitor 

nox cap init 

? Abp name Stellar Wallet 

? Apo Package ID (in Java package format, no dashes) 
com.wallet.stellar 

? Which npm client would you like to use? npm 


Initializing Capacitor project in 


/Users/tylervanderhoeven/Desktop/Web/Clients/Stellar/stellar-demowallet in 1.91ms 


Your Capacitor project is ready to launch. 
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Add platforms usina "npx cap add": 
nox cap add android 

nox cap add ios 

npx cap add electron 


Set up event handling 


On ./events/render.tsx file: 
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01 import { h } from “@stencil/core”; 
O02 fexport default function render) { 
03 return [ 


05 this account 2 ( 
Į 
06 <div class=""account-key”"> 
07 {this.account.publicKey} 
08 <button class=""small”" type=""button”"> this.copyAddress(e)} 
09 Copy Address 
10 </button> 
441 <button class=""small”" type=""button”"> this.copySecret(e) } 
12 Copy Secret 


</button> 
13 </div> 
14 
15 p 
16 Dam 


17 <button type=""button”"> this.createAccount(e)} 
18 Create Account 
149 </button> 


Y 
20 this.error ? ( 


<pre class="”error”">{JSON.stringify(this.error, null, 2)}</pre> 
22): null, 

23 kehas account 2 

24 <button type=""button”"> this.signOut(e)} 

25 Siqn Out 

26 </button> 

27 O nun 


1 
28 
29 7 


It is a simple .tsx file rendering out DOM based on a series of conditional values. A ternary 
operation toggles between Create account button and basic account UI. If the value for 
this.account is true, print the account’s public key along with some interaction buttons; if 
the value is false, print the singular Create Account button connected to the createAccount 
method. When an error encounters, print an error message and finally a Sign out button if 
there is an account to sign out. 


Create Methods 
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In ./methods/createAccount.ts file: 

import sicl from “@tinvanvil/sicl”; 

import { Keypair } from “stellar-sdk”; 

import { handleError } from “@services/error”; 

import { set } from “@services/storage”; 

export default async function createAccount(e: Event) { 

CRY 

e.preventDefault(); 

const pincode_1 = await this.setPrompt(“Enter a keystore 
pincode”); 

const pincode_2 = await this.setPrompt(“Enter keystore pincode 
aqain”); 

if (!pincode_1 || !pincode_2 || pincode_1 !== pincode_2) 

throw “Invalid pincode”; 

this.error = null; 

const keypair = Keypair.random(); 

this.account = 4 

publickey: keypair.publicKkev(), 

keystore: sicl.encrypt(pincode_1, keypair.secret(), { 

adata: JSON.strinaifv({ 

publickKey: keypair.publicKey(), 

Or 

Pye 
hs 

await set(“kevyStore”, btoa(this.account.keystore)); 
} catch (err) { 

this.error = handleError(err); 

1 

} 


Create an account 


Everything we’ve done till now was requesting to create an account that triggers prompt 
modal to ask for a pincode. The method sjcl.encrypt uses this pincode to encrypt the 
secret key from keypair. random() function. Set the this.account with the public key, 
which encrypted keystore cipher and store that cipher in base64 format in local storage 
via set(‘keyStore’). Moreover, the cipher can also be encoded into a QR code or a link 
shareable with other devices. 


Copy Address 


Once the account is created, three more actions need to be enabled: copyAddress, 
copySecret and signOut. 
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In ./methods/copyAddress.ts 

import copy from “copy-to-clipboard”; 

export default async function copyAddress(e: Event) { 
e.preventDefault(); 

copy(this.account.publicKey); 

1 


npm i -D copy-to-clipboard 


Copy Secret 
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In ./methods/copySecret.ts 


01 import sicl from “@tinvanvil/sicl”; 

02 import copy from “copy-to-clipboard”; 

03 import { handleError } from “@services/error”; 

04 eee default async function copySecret(e: Event) { 

try 

e.preventDefault( ); 

06 const pincode = await this.setPrompt(“Enter your keystore 
O7 pincode”); 

08 if (!pincode) return; 

09 this.error = null; 

10 ‘Const secret = sjell decrypt (pincode thissaccount keystore); 
11 copy(secret); 

12 t catch (err) 4 

this.error = handleError(err); 


13 
14 ; 
15 

Sign Out 


01 And finallv, ./methods/sianOut.ts 

02 impvort { remove } from “@services/storaae”: 

03 import f handleError } from “@services/error”: 

04 export default async function signOut(e: Event) { 
Erv 4 

e.preventDefault(); 

06 const confirmNuke = await this.setPrompt( 

07 “Are vou sure? This will nuke your account”, 

08 “Enter NUKE to confirm”, 

09 ): 

10 1f theonfirm Il) I /nuke/gi test (confirmNuke)): return; 

11 this.error = null: 

12 await remove(“kevStore”); 

13 location.reload(); 
Fcauch Cen) ea 

14 this.error = handleError(err); 


15 R 

16 } 

17 

18 

Set Prompt 
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01 The last method in wallet.ts file is ./methods/setPrompt.ts. 
02 export default function setPrompt( 
03 message: Stringi 
04 placeholder?: string, 
options?: Array, 
05 ): Promise { 
06 this.prompter = { 
O7 this.prompter, 
08 show: true, 
09 message, 
10 placeholder, 
11 options, 


pe 
12 return new Promise((resolve, reject) => { 


this.prompter.resolve = resolve 
14 this.prompter.reject = reject; 


15 Bae 
16 } 
17 

18 


We're done with our job! Restart the server with npm start and a legitimate, minimal 
Stellar wallet web component is ready. It’s a solid foundation for Pincode reliant simple 
non-custodial wallet. 


Conclusion 


Stellar is increasingly gaining popularity worldwide because of its built-in order books, 
unique consensus protocol and connection to existing financial infrastructure. It offers 
benefits of cheap fees, fast transaction speed, international reach, universal asset 
exchange and easy fiat on and off-ramps within the network. Offering such beneficial 
facilities, Stellar aims to become the standard method of money transfer around the 
world. The team is working to their full potential to make it possible. 


If you're searching for help to create a Stellar wallet or integrate Stellar wallet into your 
existing system, were ready to help you. Connect with our team of Stellar Blockchain 
Experts and get your idea converted into reality. 
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